<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Xiaowei Xu | Contact </title>

  <!-- google fonts -->
  <!-- <link href="//fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap" rel="stylesheet"> -->

  <!-- Template CSS -->
  <link rel="stylesheet" href="assets/css/style-starter.css">
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=crgzZKKChlf14M9Yv6waST5OKCYXU7Xo"></script>
  
  <style type="text/css">
    #visit {width: 100%;height: 500px;overflow: hidden;margin:0}
  </style>
</head>

<body>
  <!-- header -->
  <header id="site-header" class="fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand-lg stroke">
        <a class="navbar-brand" href="index.html">
          <span class="fa fa-laptop"></span> Xiaowei Xu
        </a>
        <!-- if logo is image enable this   
      <a class="navbar-brand" href="#index.html">
          <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
      </a> -->
        <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
          <span class="navbar-toggler-icon fa icon-close fa-times"></span>
          </span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item @@home__active">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item @@about__active">
                <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item @@peoples__active">
                <a class="nav-link" href="peoples.html">Peoples</a>
            </li>
            <li class="nav-item @@projects__active">
                <a class="nav-link" href="projects.html">projects</a>
            </li>
            <li class="nav-item @@publications__active">
                <a class="nav-link" href="publications.html">publications</a>
            </li>
            <li class="nav-item @@datasets__active">
                <a class="nav-link" href="datasets.html">Datasets</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="contact.html">Contact</a>
            </li>
          </ul>
        </div>
        <!-- toggle switch for light and dark theme -->
        <div class="mobile-position">
          <nav class="navigation">
            <div class="theme-switch-wrapper">
              <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox">
                <div class="mode-container">
                  <i class="gg-sun"></i>
                  <i class="gg-moon"></i>
                </div>
              </label>
            </div>
          </nav>
        </div>
        <!-- //toggle switch for light and dark theme -->
      </nav>
    </div>
  </header>
  <!-- //header -->

  <!-- contact breadcrumb -->
  <section class="w3l-about-breadcrumb text-center">
    <div class="breadcrumb-bg breadcrumb-bg-about py-sm-5 py-4">
      <div class="container py-2">
        <h2 class="title">Contact Me</h2>
        <ul class="breadcrumbs-custom-path mt-2">
          <li><a href="#url">Home</a></li>
          <li class="active"><span class="fa fa-arrow-right mx-2" aria-hidden="true"></span> Contact </li>
        </ul>
      </div>
    </div>
  </section>
  <!-- contact breadcrumb -->

  <!-- contact block -->
  <!-- contact1 -->
  <section class="w3l-contact-1 py-5">
    <div class="contacts-9 py-lg-5 py-md-4">
      <div class="container">
        <div class="d-grid contact-view">
          <div class="cont-details">
            <div class="cont-top">
              <div class="cont-left text-center">
                <span class="fa fa-phone text-primary"></span>
              </div>
              <div class="cont-right">
                <h6>Call Me</h6>
                <p><a href="xuxiaowei [AT] gdph.org.cn">xuxiaowei [AT] gdph.org.cn</a></p>
              </div>
            </div>
            <div class="cont-top margin-up">
              <div class="cont-left text-center">
                <span class="fa fa-envelope-o text-primary"></span>
              </div>
              <div class="cont-right">
                <h6>Email Me</h6>
                <p><a href="xiao.wei.xu [AT] foxmail.com" class="mail">xiao.wei.xu [AT] foxmail.com</a></p>
              </div>
            </div>
            <div class="cont-top margin-up">
              <div class="cont-left text-center">
                <span class="fa fa-map-marker text-primary"></span>
              </div>
              <div class="cont-right">
                <h6>Location</h6>
                <p>Laboratory of Artificial Intelligence and 3D Technologies for Cardiovascular Diseases,
                  Guangdong provincial People's Hospital
                  106, Zhongshan 2nd RD, Guangzhou, China</p>
              </div>
            </div>
          </div>
          <!-- 发送邮件换成微信 -->
          <div class="map-content-9">
            <img class="wechat-img" src="./assets/images/wechat_account.jpg" alt="">
            <!-- <form action="https://sendmail.w3layouts.com/submitForm" method="post">
              <div class="twice-two">
                <input type="text" class="form-control" name="w3lName" id="w3lName" placeholder="Name" required="">
                <input type="email" class="form-control" name="w3lSender" id="w3lSender" placeholder="Email" required="">
              </div>
              <div class="twice">
                <input type="text" class="form-control" name="w3lSubject" id="w3lSubject" placeholder="Subject"
                  required="">
              </div>
              <textarea name="w3lMessage" class="form-control" id="w3lMessage" placeholder="Message" required=""></textarea>
              <div class="text-right">
                <button type="submit" class="btn btn-primary btn-style mt-4">Send Message</button>
              </div>
            </form> -->
          </div>
        </div>
      </div>
    </div>
  </section>
  <h3 class="title-big text-center">Visitors to the website</h3>
  <section class="w3l-contact-1 py-md-5">
    <div class="contacts-9">
      <div class="container">
        <div id="visit"></div>
      </div>
    </div>
    

    </div>
  </section>
  
  <!-- /contact1 微信头像-->
  <div class="map-iframe">
    <!-- <img class="wechat-img" src="./assets/images/wechat_account.jpg" alt=""> -->
    <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317718.69319292053!2d-0.3817765050863085!3d51.528307984912544!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C+UK!5e0!3m2!1sen!2spl!4v1562654563739!5m2!1sen!2spl"
      width="100%" height="400" frameborder="0" style="border: 0px;" allowfullscreen=""></iframe> -->
  </div>
  <!-- //contact block -->
  <!-- Footer -->
  <section class="w3l-footer py-sm-5 py-4">
    <div class="container">
      <div class="footer-content">
        <div class="row">
          <div class="col-lg-8 footer-left">
            <p class="m-0">Xiaowei Xu © Copyright 2020. Design by <a href="https://w3layouts.com">W3layouts</a></p>
          </div>
          <div class="col-lg-4 footer-right text-lg-right text-center mt-lg-0 mt-3">
            <ul class="social m-0 p-0">
              <li><a href="#facebook"><span class="fa fa-facebook-official"></span></a></li>
              <li><a href="#linkedin"><span class="fa fa-linkedin-square"></span></a></li>
              <li><a href="#instagram"><span class="fa fa-instagram"></span></a></li>
              <li><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    

    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
      <span class="fa fa-angle-up"></span>
    </button>
    <script>
      // When the user scrolls down 20px from the top of the document, show the button
      window.onscroll = function () {
        scrollFunction()
      };

      function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("movetop").style.display = "block";
        } else {
          document.getElementById("movetop").style.display = "none";
        }
      }

      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    </script>
    <!-- /move top -->
  </section>
  <!-- //Footer -->

  <!-- all js scripts and files here -->

  <script src="assets/js/theme-change.js"></script><!-- theme switch js (light and dark)-->

  <script src="assets/js/jquery-3.3.1.min.js"></script><!-- default jQuery -->
  <script src="assets/js/jquery-3.6.0.js"></script><!-- default jQuery -->
  
  <script type="text/javascript">
    var mp = new BMap.Map("visit");
    var point;
    var marker;
    mp.centerAndZoom(new BMap.Point(62.831628,32.331932), 1);
    mp.enableScrollWheelZoom();
    // var json = [
    //   {lng:'33.984666',lat:'18.126964'},
    //   {lng:'26.331391',lat:'22.157107'},
    //   {lng:'5.137705',lat:'26.073807'},
    //   {lng:'-5.348754',lat:'30.851661'},
    //   {lng:'-0.197511',lat:'9.03069'},
    //   {lng:'47.929817',lat:'57.933307'},
    //   {lng:'89.728476',lat:'33.726691'},
    //   {lng:'99.442249',lat:'41.775766'},
    //   {lng:'120.59914',lat:'45.229479'},
    //   {lng:'114.123291',lat:'33.757431'},
    //   {lng:'116.183789',lat:'27.919589'},
    //   {lng:'119.053767',lat:'28.050249'},
    //   {lng:'126.559864',lat:'38.645311'},
    //   {lng:'122.43887',lat:'41.250283'},
    // ]
    var list = localStorage.getItem('list')
    var json = [];
    console.log(list);
    if(list!=null){
      // localStorage.setItem("myArr", JSON.stringify([1, 2, 3]));
      json = JSON.parse(list);
      console.log(list) // [1,2,3]
    }
    
    for(var i=0;i<json.length;i++){
      point = new BMap.Point(json[i].lng,json[i].lat);
      marker = new BMap.Marker(point);
      mp.addOverlay(marker); 
    }
    // $.ajax({
    //     url: "http://api.map.baidu.com/location/ip?ak=wq8tYlpqpcCytEFGcATmBUcVZ2SP01kP&coor=bd09ll",
    //     type: "POST",
    //     dataType: "jsonp",
    //     success: function (data) {
    //         point = new BMap.Point(data.content.point.x,data.content.point.y);
    //         marker = new BMap.Marker(point);
    //         mp.addOverlay(marker);
    //         json.push({lng:data.content.point.x,lat:data.content.point.y})
    //         console.log(json);
    //         localStorage.setItem("list", JSON.stringify(json));
    //     }
    // });
    // var geolocation = new BMap.Geolocation();
    // geolocation.enableSDKLocation();
    // geolocation.getCurrentPosition(function(r){
    //   if(this.getStatus() == BMAP_STATUS_SUCCESS){
    //     var mk = new BMap.Marker(r.point);
    //     map.addOverlay(mk);
    //     map.panTo(r.point);
    //     alert('您的位置：'+r.point.lng+','+r.point.lat);
    //   }
    //   else {
    //     alert('failed'+this.getStatus());
    //   }        
    // });
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(function(position){
          // 获取地理位置成功
          console.log(position.coords.latitude);//纬度
          console.log(position.coords.longitude);//经度
          console.log(position.coords.accuracy);//精度
          console.log(position.coords.altitude);//海拔高度

          point = new BMap.Point(position.coords.longitude,position.coords.latitude);
          marker = new BMap.Marker(point);
          mp.addOverlay(marker);
          json.push({lng:position.coords.longitude,lat:position.coords.latitude})
          console.log(json);
          localStorage.setItem("list", JSON.stringify(json));
      },function(positionError){
          // 取地理位置失败
          console.log(positionError);//错误信息
          // 因为是从谷歌返回的数据,国家政策的原因,无法获取(需要FQ)
          // Network location provider at 'https://www.googleapis.com/' : No response received
      })
    }
  </script>

  <!-- /typig-text-->
  <script>
    const typedTextSpan = document.querySelector(".typed-text");
    const cursorSpan = document.querySelector(".cursor");

    const textArray = ["UI/UX Designer", "Freelancer", "Web developer"];
    const typingDelay = 200;
    const erasingDelay = 10;
    const newTextDelay = 100; // Delay between current and next text
    let textArrayIndex = 0;
    let charIndex = 0;
  </script>
  <!-- //typig-text-->

  <!-- services owlcarousel -->
  <script src="assets/js/owl.carousel.js"></script>

  <!-- script for services -->
  <script>
    $(document).ready(function () {
      $('.owl-two').owlCarousel({
        loop: true,
        margin: 30,
        nav: false,
        responsiveClass: true,
        autoplay: false,
        autoplayTimeout: 5000,
        autoplaySpeed: 1000,
        autoplayHoverPause: false,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          480: {
            items: 1,
            nav: false
          },
          700: {
            items: 1,
            nav: false
          },
          1090: {
            items: 3,
            nav: false
          }
        }
      })
    })
  </script>
  <!-- //script for services -->

  <!-- script for tesimonials carousel slider -->
  <script>
    $(document).ready(function () {
      $("#owl-demo1").owlCarousel({
        loop: true,
        margin: 20,
        nav: false,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          736: {
            items: 1,
            nav: false
          },
          1000: {
            items: 2,
            nav: false,
            loop: false
          }
        }
      })
    })
  </script>
  <!-- //script for tesimonials carousel slider -->

  <!-- video popup -->
  <script src="assets/js/jquery.magnific-popup.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.popup-with-zoom-anim').magnificPopup({
        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
      });

      $('.popup-with-move-anim').magnificPopup({
        type: 'inline',

        fixedContentPos: false,
        fixedBgPos: true,

        overflowY: 'auto',

        closeBtnInside: true,
        preloader: false,

        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-slide-bottom'
      });
    });
  </script>
  <!-- //video popup -->

  <!-- stats number counter-->
  <script src="assets/js/jquery.waypoints.min.js"></script>
  <script src="assets/js/jquery.countup.js"></script>
  <script>
    $('.counter').countUp();
  </script>
  <!-- //stats number counter -->

  <!-- disable body scroll which navbar is in active -->
  <script>
    $(function () {
      $('.navbar-toggler').click(function () {
        $('body').toggleClass('noscroll');
      })
    });
  </script>
  <!-- disable body scroll which navbar is in active -->

  <!--/MENU-JS-->
  <script>
    $(window).on("scroll", function () {
      var scroll = $(window).scrollTop();

      if (scroll >= 80) {
        $("#site-header").addClass("nav-fixed");
      } else {
        $("#site-header").removeClass("nav-fixed");
      }
    });

    //Main navigation Active Class Add Remove
    $(".navbar-toggler").on("click", function () {
      $("header").toggleClass("active");
    });
    $(document).on("ready", function () {
      if ($(window).width() > 991) {
        $("header").removeClass("active");
      }
      $(window).on("resize", function () {
        if ($(window).width() > 991) {
          $("header").removeClass("active");
        }
      });
    });
  </script>
  <!--//MENU-JS-->

  <!-- bootstrap js -->
  <script src="assets/js/bootstrap.min.js"></script>

</body>

</html>